.login-wrap {

    .account-contnet{
        position: absolute;
        width: 100vw;
        height: 100vh;
        background: url('../../assets/imgs/login_back.jpg');
        z-index: 1;
        
        .taro-text {
            color: #fff;
        }
        .account-wrap {
        }
        .password-wrap {
    
        }
    }

    .loing-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        .top-wrap {
            height: 50vh;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: red;
        }
        .top-wrap-active {
            transition: height 2s ease;
            height: 0;
        }
       
        .circle-wrap {
            position: absolute;
            width: 250px;
            height: 250px;
            background-color: green;
            border-radius: 125px;
            margin-top: -125px;
            left: 50%;
            top: 50%;
            margin-left: -125px;
            border: none;
            z-index: 2;
        }
        .circle-wrap-active{
            height: 0;
            transition-property:height;
            transition-delay: 2s;
            transition-duration: 2s;
            z-index: 0;
        }
        .bottom-wrap {
            height: 50vh;
            width: 100%;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .bottom-wrap-active {
            transition: height 2s ease;
            height: 0;
            
        }
    }

    .loing-canvas-acivte {
    }

    @keyframes circle {
        from {
            height: 50vh;
        }
        to {
            height: 0;
        }
    }
}